<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<style>
			.news{
				height: 400px;
				background-color: aqua;
			}
			.user-info{
				height: 400px;
				background-color:burlywood;
			}
			.logo{
				height: 60px;
				background-color: chocolate;
			}
			.navagation{
				height: 60px;
				background-color: darkgoldenrod;
			}
			.navagation-phone{
				height: 60px;
				background-color: aquamarine;
				line-height: 60px;
			}
			.layui-icon-spread-left{
				font-size: 30px;
			}
			.tx-news{
				width: 1200px;
				height: 600px;
				margin: 0 auto;
				background-color: cornflowerblue;
			}
			.news-left{
				height: 300px;
				background-color: darkslategrey;
			}
			.news-right{
				height: 300px;
				background-color: firebrick;
			}
			/* 媒体查询 */
			/* 屏幕的宽小于575像素时 */
			/* xs的效果 */
			@media(max-width:575px){
				.tx-news{
					width:100%;
				}
			}
			/* 屏幕在575到767之间显示 */
			/* sm的效果 */
			@media(max-width:576px) and (max-width:767px){
				.tx-news{
					width:100%;
				}
			}
			/* 屏幕在768到991之间显示 */
			/* md的效果 */
			@media(max-width:768px) and (max-width:991px){
				.tx-news{
					width: 768px;
					margin: 0 auto;
				}
			}
			/* 屏幕最小在992显示 */
			/* lg的效果 */
			@media(max-width:992px){
				.tx-news{
					width: 992px;
					margin: 0 auto;
				}
			}
		</style>
	</head>
	<body>
		<!-- 模拟腾讯布局 -->
		<div class="tx-news layui-row">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 news-left"></div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 news-right"></div>
		</div>
		
		
		<!-- 菜单 -->
		<!-- 到手机大小的时候让菜单隐藏 -->
		<div class="layui-row layui-hide-xs">
			<div class="layui-col-xs2 layui-col-sm2 layui-col-md2 logo"></div>
			<div class="layui-col-xs10 layui-col-sm10 layui-col-md10 navagation"></div>
		</div>
		<!-- 手机端菜单 -->
		<div class="layui-row layui-hide-sm layui-hide-smmd" >
			<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 navagation-phone">
				<i class="layui-icon layui-icon-spread-left"></i>
			</div>
		</div>
		
		<!-- 栅格 12份-->
		<div class="layui_row">
			<!-- 在平板中 新闻4份 用户信息8份 -->
			<!-- 在网页中 新闻8份 用户信息4份 -->
			<!-- 在手机中 新闻12份 用户信息12份 -->
			<div class="layui-col-xs12 layui-col-sm4 layui-col-lg8 news"></div>
			<div class="layui-col-xs12 layui-col-sm8 layui-col-lg4 user-info"></div>
		</div>
	</body>
</html>
<script src="./layui/layui.js"></script>
